<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<view class="flex title justify-between" @click="() => (isCollapse = !isCollapse)">
					<text>图片信息</text>
					<u-icon v-show="!isCollapse" name="arrow-up" color="#000a7b"></u-icon>
					<u-icon v-show="isCollapse" name="arrow-down" color="#000a7b"></u-icon>
				</view>
				<view v-show="!taskInfo?.length>0" class="grey1-color flex justify-start" style="margin-bottom: 12px">暂无图片信息，请选择报修图片</view>

				<view v-show="!isCollapse" >
					<view  v-for="(item,index) in taskInfo">
						<view style="display: flex;margin-top: 10px;" v-if="taskInfo?.length > 0">
							<text style="flex: 1">{{item.remark||'暂无说明'}}</text>
							<view style="margin-top: 9px; display: flex; justify-content: end">
								<upload-image
									:keys="index"
									:multiple="false"
									:isRead="true"
									:accept="accept"
									camera="back"
									:list="[JSON.parse(JSON.stringify(item))]"
									:capture="capture"
									folderName="eam/mold/eamPlannedMaintenance"
								></upload-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="plannedInfoTemplate">
import UploadImage from '@/components/upload-image-ssr.vue';
const props = defineProps({
	taskInfo: {
		type: Array,
		default: () => []
	}
});
if (props.taskInfo) {
	console.log('33', props.taskInfo);
}
const { taskInfo } = toRefs(props);
// 摄像头参数设置
const capture = ref(['camera']);
const accept = ref('image');
// 是否折叠
const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}
.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
</style>
